<template>
	<view class="content-container">
		<view v-for="(item, index) in goodsList" :key="index" class="item">
			<!-- 第一行类型 + 物料名称 -->
			<view class="line1">
				<uni-tag :text="item.type" type="primary" class="tag"></uni-tag>
				<text class="material-name">物料名称：{{ item.name }}</text>
			</view>

			<!-- 第二行：物料信息：品牌+规格+单位 -->
			<view class="line2">
				<text class="label">品牌：</text><text class="value">{{ item.brand }}</text>
				<text class="label">规格：</text><text class="value">{{ item.specs }}</text>
				<text class="label">单位：</text><text class="value">{{ item.unit }}</text>
			</view>

			<!-- 第三行：所在场区 + 录入数量 -->
			<view class="line3">
				<text class="label">所在场区：</text><text class="value">{{ item.deptName }}</text>
				<text class="label">录入数量：</text><text class="value">{{ item.num }}{{ item.unit }}</text>
			</view>

			<!-- 第四行：到期时间 -->
			<view class="line4">
				<text class="label">到期时间：</text><text class="value">{{ item.expireTime }}</text>
			</view>

			<!-- 第五行：备注 -->
			<view class="line5">
				<text class="label">备注：</text><text class="value">{{ item.remark }}</text>
			</view>

			<!-- 分割线 -->
			<view class="divider"></view>

			<!-- 第六行：录入时间：2024-07-21 08:00:02(createTime)           录入人：张三(createBy) -->
			<view class="line6">
				<text class="label">录入时间：2024-07-21 08:00:02</text>
				<text class="label">录入人：张三</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			goodsList: {
				type: Array,
				required: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content-container {
		width: 100%;
	}

	.item {
		padding: 15rpx;
		background-color: #fff;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		margin-bottom: 15rpx;
	}

	.line1,
	.line2,
	.line3,
	.line4,
	.line5,
	.line6 {
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.line1 .material-name {
		font-size: 20rpx;
		font-weight: bold;
		margin-left: 10rpx;
	}

	.tag {
		margin-right: 15rpx;
	}

	.line2,
	.line3,
	.line4,
	.line5,
	.line6 {
		.label {
			font-size: 16rpx;
			font-weight: 500;
			color: #555;
			margin-right: 8rpx;
		}

		.value {
			font-size: 16rpx;
			color: #333;
			margin-right: 20rpx;
		}
	}

	.line6 {
		justify-content: space-between;
		/* 让 label 和 value 分布在行的两端 */
		width: 80%;
	}

	.divider {
		border-bottom: 1rpx solid #e0e0e0;
		margin: 20rpx 0;
	}
</style>